JS - element properties - offsetLeft

revision:


returns the horizontal offset position of an element.

top

The property returns the left position (in pixels) relative to the parent. The returned value includes: the left position, and margin of the element; the left padding, scrollbar and border of the parent.
The property is read-only.

Syntax:

element.offsetLeft : the left position of the element, in pixels.

property value:

none:

example

The offsetLeft of "DIV" is:

code:
                <div>
                    <div id="DIV">
                        <p>The offsetLeft of "DIV" is: <span id="prop"></span></p>
                    </div>
                </div>
                <style>
                    #DIV{left: 50px; margin: 10px; padding: 10px; width: 200px; position: relative;
                         border: 1px solid black}
                </style>
                <script>
                    const element = document.getElementById("DIV");
                    document.getElementById("prop").innerHTML = element.offsetLeft;
                </script>
            

The offset values of "DIV2" are:

            <div id="DIV2">
                <p>The offset values of "DIV2" are:</p>
                <p id="prop1"></p>
            </div>
            <style>
                #DIV2{top: 0px; left: 50px; margin: 10px; padding: 10px; width: 300px; position: relative; 
                    border: 1px solid black}
            </style>
            <script>
                const element1 = document.getElementById("DIV2");
                let text =  "Left: " + element1.offsetLeft + "<br>Top: " + element1.offsetTop;
                document.getElementById("prop1").innerHTML = text;
            </script>